import { memo, useState, useEffect, useRef } from 'react';
import { FaRegFile, FaFolderPlus, FaPen, FaTrash, FaFile, FaFolder } from 'react-icons/fa6';
import { globalPlayer } from 'python-player';
import globalEventManager, { FILE_EVENTS } from '../../utils/eventManager';
import styles from './FileContextMenu.module.css';

const FileContextMenu = memo(({ 
  isVisible, 
  position, 
  onClose, 
  onNewFile,
  onNewFolder, 
  onDeleteFile, 
  onRenameFile,
  onOpenFile,
  selectedFile 
}) => {
  const menuRef = useRef(null);

  // 点击外部关闭菜单
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        onClose();
      }
    };

    const handleEscapeKey = (event) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isVisible) {
      document.addEventListener('mousedown', handleClickOutside);
      document.addEventListener('keydown', handleEscapeKey);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('keydown', handleEscapeKey);
    };
  }, [isVisible, onClose]);

  if (!isVisible) return null;

  const handleNewFile = () => {
    onNewFile();
    onClose();
  };

  const handleNewFolder = () => {
    onNewFolder();
    onClose();
  };

  const handleDeleteFile = () => {
    if (selectedFile) {
      onDeleteFile(selectedFile);
    }
    onClose();
  };

  const handleRenameFile = () => {
    if (selectedFile) {
      onRenameFile(selectedFile);
    }
    onClose();
  };

  // 判断是否为文件夹
  const isFolder = selectedFile && selectedFile.type === 'directory';
  const isFile = selectedFile && selectedFile.type === 'file';

  return (
    <div
      ref={menuRef}
      className={styles.contextMenu}
      style={{
        left: position.x,
        top: position.y,
      }}
    >
      {/* 空白区域或文件夹菜单：支持创建新文件和文件夹 */}
      {(!selectedFile || isFolder) && (
        <>
          <button
            className={styles.menuItem}
            onClick={handleNewFile}
          >
            <FaRegFile className={styles.icon} />
            <span className={styles.text}>新建文件</span>
          </button>
          
          <button
            className={styles.menuItem}
            onClick={handleNewFolder}
          >
            <FaFolderPlus className={styles.icon} />
            <span className={styles.text}>新建文件夹</span>
          </button>
          
          {selectedFile && <div className={styles.separator} />}
        </>
      )}

      {/* 文件菜单：只显示文件操作 */}
      {isFile && (
        <>
          <button
            className={styles.menuItem}
            onClick={() => {
              // 打开文件
              if (selectedFile && onOpenFile) {
                onOpenFile(selectedFile.id);
              }
              onClose();
            }}
          >
            <FaFile className={styles.icon} />
            <span className={styles.text}>打开文件</span>
          </button>
          
          <div className={styles.separator} />
        </>
      )}

      {/* 通用操作：重命名和删除 */}
      {selectedFile && (
        <>
          <button
            className={styles.menuItem}
            onClick={handleRenameFile}
          >
            <FaPen className={styles.icon} />
            <span className={styles.text}>重命名</span>
          </button>
          
          <button
            className={`${styles.menuItem} ${styles.danger}`}
            onClick={handleDeleteFile}
          >
            <FaTrash className={styles.icon} />
            <span className={styles.text}>
              {isFolder ? '删除文件夹' : '删除文件'}
            </span>
          </button>
        </>
      )}
    </div>
  );
});

FileContextMenu.displayName = 'FileContextMenu';

export default FileContextMenu;
